<template>
    <div class="headerNav">
        <div class="operate">
            <el-icon @click="drawer = true" :size="20">
                <Tools />
            </el-icon>
            <el-icon v-if="!isqunap" @click="enterFullscreen()" :size="20">
                <FullScreen />
            </el-icon>
            <el-icon v-else @click="exitFullscreen()" :size="25">
                <FullScreen />
            </el-icon>
        </div>
        <div class="cc">
            <el-dropdown>
                <div class="userinfo">
                    管理员 <img src="/img/head.webp" alt="" />
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="outLogin()" :icon="CircleClose">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    <el-drawer v-model="drawer" :with-header="false">
        <div class="el-drawer">
            <h3>各种设置</h3>
            <el-divider />
            <h4 style="margin-bottom: 20px">登录设置</h4>
            <el-input v-model="password" type="password" placeholder="控制秘钥" show-password />
            <div style="height: 10px;"></div>
            <div>
                <el-button type="success" plain :disabled="password == ''" @click="isloginbtn(password)">开启登录</el-button>
                <el-button type="warning" plain :disabled="password == ''" @click="nologinbtn(password)">禁止登录</el-button>
            </div>
            <el-divider />
            <h4 style="margin-bottom: 20px">主题切换</h4>
            <XSwitch v-model="theme" small :onChange="handleChange" rightText="深色" leftText="浅色"></XSwitch>
            <el-divider />
        </div>
    </el-drawer>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter();
// 主题切换===================================================================
import { userThemeStore } from '@/stores/userTheme.js'
// 使用 useUserThemeStore 来获取 store 实例
const userTheme = userThemeStore()
const theme = ref(true)
// 定义切换主题的函数
const handleChange = (val) => {
    userTheme.toggleTheme()
}
// ===========================================================================
const drawer = ref(false);
const isqunap = ref(false);
// 进入全屏模式
function enterFullscreen() {
    isqunap.value = !isqunap.value;
    const doc = window.document.documentElement;
    const requestFullscreen =
        doc.requestFullscreen ||
        doc.mozRequestFullScreen ||
        doc.webkitRequestFullscreen ||
        doc.msRequestFullscreen;

    if (requestFullscreen) {
        requestFullscreen.call(doc);
    }
}
// 退出全屏模式
function exitFullscreen() {
    isqunap.value = !isqunap.value;
    const doc = window.document;
    const exitFullscreen =
        doc.exitFullscreen ||
        doc.mozCancelFullScreen ||
        doc.webkitExitFullscreen ||
        doc.msExitFullscreen;

    if (exitFullscreen) {
        exitFullscreen.call(doc);
    }
}
function outLogin() {
    localStorage.clear();
    router.replace("/");
}
onMounted(() => {
    theme.value = userTheme.theme == 'dark' ? true : false
})
</script>
<style scoped lang='scss'>
.headerNav {
    display: flex;
    align-items: center;
    justify-content: center;

    .operate {
        display: flex;
        margin: 0 15px;
        align-items: center;

        .el-icon {
            margin: 0 8px;
        }
    }

    .userinfo {
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 12px;
        font-weight: bold;

        img {
            margin-left: 10px;
            height: 40px;
            border-radius: 50%;
        }
    }
}
.el-drawer{
    width: 100%;
    height: 100%;
    margin: -20px;
    padding: 20px;
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

.el-drawer__body{
    // color: var(--text-color) !important;
    // background-color: var(--bg-color) !important;
}
</style>
